<template>
	<el-dialog :title="title" class="dialog-wrap" :visible.sync="dialogVisible" :close-on-click-modal="false" @closed="resetForm()" width="700px">
		<div class="dialog-cont">
			<el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="上级菜单" class="newMenu">
					<tree-select :data="newMenu" :checkedKeys="defaultCheckedKeys" @popoverHide="popoverHide" @clear="clear" v-if="flag" style="width: 100%"></tree-select>
				</el-form-item>
				<el-form-item label="菜单名称" prop="name">
					<el-input type="input" v-model="form.name"></el-input>
				</el-form-item>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="是否业务菜单" label-width="120px">
							<el-radio-group v-model="form.isBusi">
								<el-radio label="1">是</el-radio>
								<el-radio label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否开发菜单" label-width="120px">
							<el-radio-group v-model="form.isDev">
								<el-radio label="1">是</el-radio>
								<el-radio label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否公共菜单" label-width="120px">
							<el-radio-group v-model="form.isPublic">
								<el-radio label="1">是</el-radio>
								<el-radio label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否激活">
							<el-radio-group v-model="form.del">
								<el-radio label="1">是</el-radio>
								<el-radio label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否是按钮">
							<el-radio-group v-model="form.button">
								<el-radio label="3">是</el-radio>
								<el-radio label="4">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="排序">
							<el-input-number v-model="form.orderSort" :min="1" :max="1000" size="medium" label="排序"></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item label="菜单地址" prop="url">
					<el-input type="input" v-model="form.url" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="菜单图标" prop="icon">
					<el-input type="input" v-model="form.icon" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="描述" prop="content">
					<el-input type="input" v-model="form.content" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
		</div>

		<div slot="footer" class="dialog-footer">
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" v-preventReClick @click="submitForm('form')">提 交</el-button>
			</span>
		</div>
	</el-dialog>
</template>

<script>
import { tbMenuAdd, tbMenuUpdate } from '@/api/admin/system/menu';
import TreeSelect from '@/components/treeSelect';
import Bus from '@/utils/bus.js';
import webMenu from '@/mixins/webMenu.js';
export default {
	components: { TreeSelect },
	mixins: [webMenu],
	data() {
		return {
			title: '菜单管理-新增',
			dialogVisible: false,
			checkedData: {},
			addOrEdit: 1,
			orderSortShow: false,
			popoverHideClick: false,
			form: {
				del: '1',
				isBusi: '1',
				isDev: '1',
				isPublic: '1',
				name: '',
				content: '',
				level: '1',
				url: '',
				pid: '0',
				style: '',
				orderSort: '10',
				button: '4',
				icon: ''
			},
			rules: {
				name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
				pname: [{ required: true, message: '请选择上级菜单', trigger: 'change' }]
			},
			//树形选框配置
			flag: false,
			defaultCheckedKeys: [],
			newMenu: []
		};
	},
	props: ['dataArr'],
	mounted() {
		this.list();
		this.$bus.$on('showAddDialogAddMenu', (v, type) => {
			this.checkedData = v || {};
			this.handleAddOrEdit(type);
		});
	},
	beforeDestroy() {
		this.$bus.$off('showAddDialogAddMenu');
	},
	methods: {
		list() {
			console.log(this.dataArr);
			this.newMenu = this.dataArr;
		},
		handleAddOrEdit(type) {
			if (type == 2) {
				this.title = '编辑';
				this.orderSortShow = true;
				this.form.id = this.checkedData.id || 0;
				if (this.checkedData.level == '3') {
					this.form.button = '3';
				} else {
					this.form.button = '4';
				}
				for (let i in this.checkedData) {
					if (this.form.hasOwnProperty(i)) {
						this.form[i] = this.checkedData[i] || '';
					}
				}
				if (this.checkedData) {
					this.form.pid = this.checkedData.pid;
					if (this.checkedData.pid !== '0') {
						this.defaultCheckedKeys[0] = this.form.pid;
					}
				}
			} else {
				this.title = '新增';
				this.orderSortShow = false;
				if (this.checkedData.hasOwnProperty('id')) {
					this.defaultCheckedKeys[0] = this.checkedData.id;
				}
				delete this.form.id;
				if (this.checkedData) {
					this.form.pid = this.checkedData.id;
				}
			}

			this.addOrEdit = type || 1;
			this.dialogVisible = true;
			this.flag = true;
			this.form.button = this.form.button == '' ? '4' : this.form.button;
		},
		submitForm(form) {
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.addOrEdit == 1 ? this.add() : this.edit();
				}
			});
		},
		add() {
			var data = JSON.parse(JSON.stringify(this.form));
			if (!this.popoverHideClick) {
				if (this.checkedData != undefined) {
					// data.pid = this.checkedData.pid;
				} else if (data.pid == null) {
					data.pid = '0';
				}
			}
			data.level = data.button == 3 ? 3 : 2;

			if (data.pid == null) {
				data.pid = '0';
			}
			tbMenuAdd(data).then((res) => {
				if (res.data.code == 0) {
					this.dialogVisible = false;
					this.$bus.$emit('refreshMenuList');
					this.$message({
						message: '操作成功',
						type: 'success'
					});
					// location.reload();
				}
			});
		},
		//编辑
		edit() {
			var data = JSON.parse(JSON.stringify(this.form));
			if (!this.popoverHideClick) {
				if (this.checkedData != undefined) {
					data.pid = this.checkedData.pid;
				} else if (data.pid == null) {
					data.pid = '0';
				}
			}
			data.level = data.button == 3 ? 3 : 2;
			tbMenuUpdate(data).then((res) => {
				if (res.data.code == 0) {
					this.dialogVisible = false;
					this.$bus.$emit('refreshMenuList');
					this.$message({
						message: '操作成功',
						type: 'success'
					});
				}
			});
		},
		popoverHide(checkedIds, checkedData) {
			//新增
			this.popoverHideClick = true;
			this.form.pid = checkedIds;
			this.form.level = parseInt(checkedData.level) + 1;
		},
		clear() {
			this.form.pid = '1';
			this.form.level = '1';
		},
		//重置表单
		resetForm() {
			for (let key in this.form) {
				this.form[key] = '';
			}
			this.form.del = '1';
			this.form.isBusi = '1';
			this.form.isDev = '1';
			this.form.isPublic = '1';
			this.form.level = '1';
			this.form.pid = '0';
			this.defaultCheckedKeys = [];
			this.flag = false;
		}
	}
};
</script>
